<template>
  <div class="filters">
    <el-row type="flex" class="filters-top" justify="space-between" align="middle">
      <el-col :span="8">
        单程：
        {{data.info.departCity}} - {{data.info.destCity}}
        /
        {{data.info.departDate}}
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airport" placeholder="起飞机场">
          <el-option
            v-for="(item,index) in data.options.airport"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="flightTimes" placeholder="起飞时间">
          <el-option
            v-for="(item,index) in data.options.flightTimes"
            :key="index"
            :label="`${item.from}:00-${item.to}:00`"
            :value="`${item.from},${item.to}`"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="company" placeholder="航空公司">
          <el-option
            v-for="(item,index) in data.options.company"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airSize" placeholder="机型">
          <el-option
            v-for="(item,index) in airOptions"
            :key="index"
            :label="item.name"
            :value="item.size"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button type="primary" round plain size="mini" @click="handleFiltersCancel">撤销</el-button>
    </div>
    <!-- 获取flights数据 不需要显示 -->
    <span v-show="false">{{data.flights}}</span>
    <!-- 引入计算属性中的filter 监听数据变化-->
    <span v-show="false">{{filter}}</span>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      airport: "", // 机场
      flightTimes: "", // 出发时间
      company: "", // 航空公司
      airSize: "", // 机型大小
      // 自定义机型大小
      airOptions: [
        { name: "大", size: "L" },
        { name: "中", size: "M" },
        { name: "小", size: "S" }
      ]
    };
  },
  computed: {
    filter() {
      let arr = [];
      // 定义一个变量假设所有数据都符合条件 然后我们筛选出不符合条件的让他变为false

      arr = this.data.flights.filter(v => {
        let valid = true;
        // 时间需要进行处理一下
        // 输出的value为 一个时间段 比如 6,12 将它放入数组比较
        // 解构数组
        const [start, end] = this.flightTimes.split(",");
        // 看飞机起飞时间 是否在这个时间段内
        // 切割出发时间的小时
        const depTime = +v.dep_time.split(":")[0];
        // 找出不符合条件的值 将valid修改为false
        if (
          (this.airport && v.org_airport_name !== this.airport) ||
          (this.company && v.airline_name !== this.company) ||
          (this.airSize && v.plane_size !== this.airSize) ||
          (this.flightTimes && !(+start <= depTime && depTime < +end))
        ) {
          valid = false;
        }
        return valid;
      });
      this.$emit("setPageList", arr);
      return "";
    }
  },
  methods: {
    // 撤销条件时候触发
    handleFiltersCancel() {
      // 直接清空筛选条件即可
      this.airport = ""; // 机场
      this.flightTimes = ""; // 出发时间
      this.company = ""; // 航空公司
      this.airSize = ""; // 机型大小
      // 将数据返回给setPageList
      this.$emit("setPageList", this.data.flights);
    }
  }
};
</script>

<style scoped lang="less">
.filters {
  margin-bottom: 20px;
}

.filters-top {
  > div {
    /deep/ .el-select {
      margin-left: 10px;
    }
  }
}

.filter-cancel {
  margin-top: 10px;
}
</style>